<template>
	<view class="content">
		<view class="contentTop">
			<uni-search></uni-search>
			<view class="tabsSwiper">
				<view class="text" :class="{'tabText' : classiftNbm == 1}"  @click="classift(1)">
					推荐
				</view>
				<view class="text" :class="{'tabText' : classiftNbm == 2}"  @click="classift(2)">
					出版
				</view>
				<view class="text" :class="{'tabText' : classiftNbm == 3}"  @click="classift(3)">
					听书
				</view>
				<view class="text" :class="{'tabText' : classiftNbm == 4}"  @click="classift(4)">
					漫画
				</view>
				<view class="text" :class="{'tabText' : classiftNbm == 5}"  @click="classift(5)">
					最新上架
				</view>
			</view>
		</view>
		
		<view ref="ovscroll" id="ovscroll" class="swiperPage ovscroll">
			<view class="recommend" v-if="classiftNbm == 1">
				<list-of-recommended @booksPage="booksPage"></list-of-recommended>
				<banner-swiper @booksPage="booksPage"></banner-swiper>
				<hot-labels @booksPage="booksPage"></hot-labels>
				<new-arrival @booksPage="booksPage"></new-arrival>
				<guess-you-like @booksPage="booksPage"></guess-you-like>
			</view>
			<view class="recommend" v-if="classiftNbm == 2">
				<ranking-list></ranking-list>
				<hot-tags></hot-tags>
				<classift-banner></classift-banner>
				<find-good-books></find-good-books>
				<hit-the-shelf></hit-the-shelf>
				<class-you-like></class-you-like>
			</view>
			<view class="recommend ovscroll"  v-if="classiftNbm ==3">
				<div style="width: 84vw; height: 50vw; text-align: center; line-height: 50vw;">
					暂未上线
				</div>
			</view>
			<view class="recommend ovscroll"  v-if="classiftNbm ==4">
				<div style="width: 84vw; height: 50vw; text-align: center; line-height: 50vw;">
					暂未上线
				</div>
			</view>
			<view class="recommend ovscroll"  v-if="classiftNbm ==5">
				<exclusive></exclusive>
				<choiceness></choiceness>
				<metropolis></metropolis>
				<fantasy></fantasy>
				<spiritual></spiritual>
				<history></history>
				<new-you-like></new-you-like>
			</view>
			
			<!-- 加载中 -->
			<view class="recommend ovscroll"  v-if="classiftNbm ==7">
				<div class="project-loading">
				  <div class="loader">
					<div class="loader-inner line-scale-pulse-out">
					  <div style="background: #f95476"></div>
					  <div style="background: #ffb74e"></div>
					  <div style="background: #4886ff"></div>
					  <div style="background: #ffb74e"></div>
					  <div style="background: #f95476"></div>
					</div>
				  </div>
				</div>
			</view>
			<!-- 加载中 -->
			
		</view>
	</view>
</template>

<script>
// 搜索插件
import uniSearch from '@/components/search/uniSearch.vue';
// 推荐分类 推荐榜
import ListOfRecommended from '@/components/recommend/ListOfRecommended/ListOfRecommended.vue';
// 推荐分类 广告banner
import bannerSwiper from '@/components/recommend/ListOfRecommended/bannerSwiper.vue';
// 推荐分类 热门标签
import hotLabels from '@/components/recommend/hotLabels/hotLabels.vue';
// 推荐分类 最新上架·热门飙升
import newArrival from '@/components/recommend/newArrival/newArrival.vue';
// 推荐分类 猜你喜欢
import guessYouLike from '@/components/recommend/guessYouLike/guessYouLike.vue';
// 出版分类 排行榜
import rankingList from '@/components/publish/rankingList/rankingList.vue';
// 出版分类 热门标签
import hotTags from '@/components/publish/hotTags/hotTags.vue';
// 出版分类 广告banner
import classiftBanner from '@/components/publish/rankingList/bannerSwiper.vue';
// 出版分类 藏书馆·发现好书
import findGoodBooks from '@/components/publish/findGoodBooks/findGoodBooks.vue';
// 出版分类 上架速递
import hitTheShelf from '@/components/publish/hitTheShelf/hitTheShelf.vue';
// 出版分类 猜你喜欢
import classYouLike from '@/components/publish/guessYouLike/guessYouLike.vue';
// 最新上架 专属推荐
import exclusive from '@/components/newArrival/exclusive/exclusive.vue';
// 最新上架 口碑精选
import choiceness from '@/components/newArrival/choiceness/choiceness.vue';
// 最新上架 新晋都市
import metropolis from '@/components/newArrival/metropolis/metropolis.vue';
// 最新上架 新晋玄幻
import fantasy from '@/components/newArrival/fantasy/fantasy.vue';
// 最新上架 新晋灵异
import spiritual from '@/components/newArrival/spiritual/spiritual.vue';
// 最新上架 新晋历史
import history from '@/components/newArrival/history/history.vue';
// 最新上架 猜你喜欢
import newYouLike from '@/components/newArrival/newYouLike/newYouLike.vue';
export default {
	components: {
		uniSearch,
		ListOfRecommended,
		bannerSwiper,
		hotLabels,
		newArrival,
		guessYouLike,
		rankingList,
		hotTags,
		classiftBanner,
		findGoodBooks,
		hitTheShelf,
		classYouLike,
		exclusive,
		choiceness,
		metropolis,
		fantasy,
		spiritual,
		history,
		newYouLike
	},
	data() {
		return {
			classiftNbm: 1,
		};
	},
	onLoad() {
		
	},
	methods: {
		classift(e){
			const that = this
			that.classiftNbm =7
			setTimeout(function(){
				that.classiftNbm = e
			},100)
		},
		booksPage(e){
			console.log(e)
			uni.navigateTo({
				url: '../books/books?id='+ e
			});
		}
	}
};
</script>

<style lang="less">
.content {
	width: 100vw;
	background-color: #f6f6f6;
	.contentTop{
		position: fixed;
		top: 0;
		z-index: 1000;
		.tabsSwiper{
			display: flex;
			justify-content: flex-start;
			align-items: flex-end;
			align-content: flex-end;
			box-sizing: border-box;
			width: 100vw;
			height: 13vw;
			padding: 5vh 0 1vh 0;
			background-color: #f6f6f6;
			.text{
				font-size: 4.2vw;
				color: #aaaaaa;
				font-weight: 600;
				padding-left: 4vw;
			}
			.tabText{
				font-size: 6vw;
				color: #000000;
			}
		}
	}
	.swiperPage {
		padding-top: 35vw;
		width: 100vw;
		.recommend {
			width: 100vw;
			box-sizing: border-box;
			padding: 0 4vw;
			padding-bottom: 5vw;
		}
		.ovscroll{
			overflow-y: scroll;
		}
	}
}

*::-webkit-scrollbar {
	width: 0px;
	height: 0px;
	background-color: #f5f5f5;
}
*::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
	background-color: #f5f5f5;
}
*::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
	background-color: #bddbff;
}


.project-loading {
  background: #fff;
  // width: 100%;
  // height: 100%;
  position: fixed;
  left: 0;
  // top: 35vw;
  z-index: 100000
}

.project-loading .loader {
  position: fixed;
  top: calc(50% - 21px);
  left: 44vw
}

@-webkit-keyframes line-scale-pulse-out {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1)
  }

  50% {
    -webkit-transform: scaley(.4);
    transform: scaley(.4)
  }

  100% {
    -webkit-transform: scaley(1);
    transform: scaley(1)
  }
}

@keyframes line-scale-pulse-out {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1)
  }

  50% {
    -webkit-transform: scaley(.4);
    transform: scaley(.4)
  }

  100% {
    -webkit-transform: scaley(1);
    transform: scaley(1)
  }
}

.line-scale-pulse-out>div {
  width: 3px;
  height: 40px;
  border-radius: 2px;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
  -webkit-animation: line-scale-pulse-out .9s -.6s infinite cubic-bezier(.85, .25, .37, .85);
  animation: line-scale-pulse-out .9s -.6s infinite cubic-bezier(.85, .25, .37, .85)
}

.line-scale-pulse-out>div:nth-child(2),
.line-scale-pulse-out>div:nth-child(4) {
  -webkit-animation-delay: -.4s !important;
  animation-delay: -.4s !important
}

.line-scale-pulse-out>div:nth-child(1),
.line-scale-pulse-out>div:nth-child(5) {
  -webkit-animation-delay: -.2s !important;
  animation-delay: -.2s !important
}

</style>
